<template>
  <div class="widget">
    <p class="widget-title">{{ content.display_name }}</p>
    <el-input type="text" class="val" v-model="defaultValue" @focus="showDialog" @change="sendValue" />
    <el-dialog title=" " :visible.sync="showEditor">
      <div>
        <el-input type="text" class="dialog-val" :rows="10" v-for="(e, i) in valLis" :key="i" v-model="e.val">
          <el-button slot="append" icon="el-icon-delete" @click="delValLis(i)" />
        </el-input>
        <el-button class="dialog-add" @click="addValLis">添加</el-button>
      </div>

      <!-- <div v-if="!previousRes">
        <el-input type="text" class="dialog-val" :rows="10" v-for="(e, i) in valLis" :key="i" v-model="e.val">
          <el-button slot="append" icon="el-icon-delete" @click="delValLis(i)" />
        </el-input>
        <el-button class="dialog-add" @click="addValLis">添加</el-button>
      </div>
      <div v-else>
        <div v-for="(e, i) in previousRes" :key="i" class="dialog-val">
          <el-checkbox v-model="e.model" @change="handlePreviousResItem(i)">
            {{ e.val }}
          </el-checkbox>
        </div>
      </div> -->

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitReject">确认</el-button>
        <el-button @click="showEditor = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
// import DagGraph from "@/views/dag/dagEdit/graph";
// let graph = null;

export default {
  props: {},
  data() {
    return {
      content: {},
      dagStructure: {},
      defaultValue: '',
      showEditor: false,
      valLis: [],
      previousRes: null
    };
  },
  methods: {
    sendValue() {
      this.content["default_value"] = this.defaultValue
      this.content["defaultValue"] = this.defaultValue
      this.$EventBus.$emit('defaultValue', this.content)
      // console.log(this.content)
      // console.log(graph)
    },
    showDialog() {
      this.showEditor = true
      this.valLis = (this.defaultValue?.split(',') || []).map(e => {
        return {
          val: e
        }
      })
    },
    delValLis(i) {
      this.valLis.splice(i, 1);
    },
    addValLis() {
      this.valLis?.push({ val: '' })
    },
    submitReject() {
      if (this.previousRes) {
        let temp = this.previousRes.map(e => e.model && e.val).filter(e => e)
        console.log(temp)
        this.defaultValue = temp.join(',')
      } else {
        let temp = this.valLis.map(e => e.val).filter(e => e)
        this.defaultValue = temp.join(',')
      }

      this.sendValue()
      this.showEditor = false
    },
    handlePreviousResItem(i) {
      console.log(i)
    },
    handlePreviousRes() {
      let prev = this.dagStructure[this.content.component_id]
      if (prev) {
        let tempText = prev.result.stream[0].text
        let tempTable = tempText.replace('[', '').replace(']', '')?.split('\n')
        this.previousRes = tempTable[0].trim()?.split('  ').map(e => {
          return {
            val: e,
            model: this.defaultValue.indexOf(e) != -1
          }
        })
      }
    }
  },
  mounted() {
    this.defaultValue = this.content.default_value
    this.handlePreviousRes()
    // if (DagGraph["graph"]) {
    //   graph = DagGraph["graph"];
    // }
  }
};
</script>

<style lang="less" scoped>
.val {
  width: 180px;
}

.dialog-val {
  margin: 10px 0;
}
</style>
